Jeremy Morris and Lisa Tagliaferri

DigitalOcean Spaces is an object storage solution, ideal for unstructured data such as audio, video, images or large amounts of text. To learn more about Spaces and object storage, you can read through An Introduction to DigitalOcean Spaces.

In this tutorial, we will be covering how to setup your Django application to work with Spaces.

In order to begin this tutorial, you should have a few things set up:

With an initial server set up and a DigitalOcean Space and API key, you’re ready to begin.

If you haven’t already, first update and upgrade your server.

Your server should ship with Python 3, but you can run the following command to ensure that it is installed:

Next, install pip to manage software packages for Python:

Finally, we can install the virtualenv module so we can use it to set up a programming environment:

For additional guidance and information about programmig environments, you can read about setting up a virtual environment.

We’ll now move on to creating the Django app that will be utilizing our DigitalOcean Space.

While in the server’s home directory, run the following command to create a directory (in this case, we’ll name it django-apps) to hold the project and navigate to the directory:

Within this directory, create a virtual environment with the following command. We’ll call it env, but you can call it whatever you would like.

You can now activate the environment and will receive feedback that you’re in the environment by the change in your command line’s prefix.

You will receive feedback that you’re in the environment by the change in your command line’s prefix. It will look something like this, but will change depending on what directory you are in:

Within the environment, install the Django package with pip so that we can create and run a Django app. To learn more about Django, read our tutorial series on Django Development.

Then create the project with the following command, in this case we’ll call it mysite.

Next we’ll install Boto 3, which is an AWS SDK for Python that will allow our application to interact with things like S3, EC2 and DigitalOcean Spaces. Because DigitalOcean Spaces is interoperable with Amazon S3, Spaces can interact with tools such as Boto 3 with ease. For more details on the comparison between S3 and Spaces please review the Spaces docs.

Another library that is crucial for our project is django-storages, which is a collection of custom storage backends for Django. We’ll also install this with pip.

You have setup your dependencies within the environment of your Django app and are now ready to set up static and template directories.

With our environment set up with all dependencies, you can now switch to the mysite/mysite directory,

Within the mysite/mysite directory, run the following commands to create the static and template directories.

We’ll next create the subdirectories for images and CSS to live within the static directory.

Once you’ve made the directories, we’ll download a test file that we’ll eventually add to our object storage. Switch to the img directory since we’ll be downloading an image.

Within this directory, we’ll download the DigitalOcean logo image using Wget’s wget command. This is a commonly used GNU program, preinstalled on Ubuntu distros, to retrieve content from web servers.

You’ll see the output similar to the following:

At this point, if you run the command ls, you’ll notice that an image named DO_Logo_icon_blue.png now exists in the static/img/ directory.

With these directories set up and the image will be storing downloaded to the server, we can move on to editing the files associated with our Django app.

We’ll start by editing the style sheet. You should move into the css directory so that we can add a basic style sheet for our web app.

Use nano, or another text editor of your choice, to edit the document.

Once the file opens, add the following CSS:

Once you are finished, you can save and close the file. From here, navigate to the templates directory.

We need to open a file called home.html and add HTML into it for how our basic web app will be displayed. Using nano, open the file so it’s ready for editing:

Within the document, add the following:

Save and close the file. The last file we will update is the urls.py file so that it points to your newly created home.html file. We need to move into the following directory:

Use nano to edit the urls.py file.

You can delete everything in the file and then add the following:

With these files set up, we can move on to editing our settings.py file in order to integrate it with object storage.

Now it’s time to update your settings file with your Spaces credentials, so that we can take advantage of the page we’ve setup to display the image.

Keep in mind that in this example we will be hardcoding our credentials for brevity, but this is not secure enough for a production setup. It is recommended that you use a package like Python Decouple something like to mask your Spaces credentials. This package will separate the settings parameters from your source code, which is necessary for a production-grade Django application.

We’ll start by navigating to the location of your settings file.

Open the file for editing, using nano:

Add your server ip as an allowed host.

Then add storages to the installed apps section of the settings file and remove django.contrib.admin since we won’t be using that in this tutorial. It should look like the following.

Replace and add the highlighted text to the TEMPLATES section of the settings file, so that the project knows where to locate your home.html file.

Finally, let’s update your settings at the bottom of the file. We’ll be adding the following below the # Static files section. Be sure to add your own access keys, bucket name, and the directory you would like your files to live. You can add a directory through your Spaces interface in-browser. At the time of writing, NYC3 is the only region where Spaces currently are, so that is being passed as the endpoint URL.

Now our settings file is ready to integrate our Django app with object storage.

Now we’ll run collectstatic and you’ll notice files being transferred, including the image that we’ve saved in our static directory. It will get transferred to the Spaces location that we’ve identified in the settings file.

To accomplish this, let’s navigate to ~/django-apps/mysite/ :

Within the directory, run the following command:

You’ll see the following output and should respond yes when prompted.

Then you’ll see some more output telling you the file has been copied to Spaces.

At this point, if you return to your bucket from your DigitalOcean Cloud account, you’ll see the css and img directories added to the folder you pointed them to, with app.css in the css directory, and the DO-Logo_icon_blue-.png image in the img directory.

With everything set up and our files in our object storage, we can now test our application by navigating to the page in which our static file is being served.

First, let’s ensure that our firewall will allow traffic to pass through port 8000 by issuing the following command:

Now, we can run our server by referring to our server’s IP address and using port 8000.

In a web browser, navigate to the http://your-server-ip:8000 to see the result of the Django application you’ve created. You will see the following output in your browser:

When you are done with testing your app, you can press CTRL + C to stop the runserver command. This will return you to the your programming environment.

When you are ready to leave your Python environment, you can run the deactivate command:

Deactivating your programming environment will put you back to the terminal command prompt.

In this tutorial you have successfully created a Django application that serves files from DigitalOcean Spaces. In the process you’ve learned about static files, how to manage static files and how to serve them from a cloud service.

You can continue learning about web development with Python and Django by reading our tutorial series on Django Development.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

author

editor

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

If you get a 403 Forbidden, makes sure you add a signature to you request in you storage settings:

More information:Github

Hi I meet this issue:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://nyc3.digitaloceanspaces.com/kjmgstorage/kjmgstorage/css/bootstrap.min.css?Signature=9XVJJVCihrYh%2BXIlsAHMfr7%2F9bs%3D&AWSAccessKeyId=KQBENRUKO4KD6OLDEZSH&Expires=1537511831. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

Hi How to set-up a Django project with digitalocean Spaces, but with different folders for static files and media files?

Am I the only one getting a 403 Forbidden following this tutorial?Here the complete response:

I think it could be something related to the querystring parameters:

Any hints?

Hi how does spaces works? Is it a wrapper around Amazon S3 service?

I see all the settings like if you were using storages with Amazon S3.

Hi, I tried it but I’m still getting:

What am I doing wrong?If someone can help me.

This is my code:

I have installed django-storages and boto3

Hello, Thanks for this great article.

Please also add how to use media files (user uploaded) in Django. Also how to setup MEDIA and MEDIA_ROOT to access SPACES.

ThanksPavan.

Update this documentation with the required signature version

withoutAWS_S3_SIGNATURE_VERSION = ‘s3v4’

in my settings.py I was getting 403 for all static files!

Hi, I have a question, in deed two questions. I followed the steps, and everything is working perfect except Ckeditor files.

When I start to user the spaces, some static files didn’t load, so I had to manually set the permissions to public. But although I did so for ckeeditor, it is not loading and console is logging 403 aborted errors. I am using django backend. I have also tried to configure AWS_S3_SIGNATURE_VERSION but not working.

If any one can help me, before I go crazy, it will be highly appreciated.

HiI have a question, what is the interest of using Spaces if our files stay stored in /static/img/ ? I want to link Spaces to my project because I will store thousands of images, is it possible to store them ONLY in the Space I have created ?

Thank you